<!--问题账台-->
<template>
  <view class="page-column-container" :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }">
    <view class="serach-view-box">
      <SearchTextView style="width: 100%" @tap="jumpSearchPage"></SearchTextView>
    </view>
    <template v-for="item in list" :key="item">
      <view class="item-container" @click="jumpPage(item)">
        <view class="item-title-container">
          <text style="flex: 1; color: #0da863; font-size: 16px">{{ item.region_name }}</text>
          <text style="color: #0da863; font-size: 14px">整改率：{{ item.reformed_rate }}%</text>
        </view>
        <view class="item-content-container">
          <view class="content-container">
            <text>问题点位数</text>
            <text style="color: #2456c4; margin-top: 5px">{{ item.problem_point_count }}</text>
          </view>
          <view class="content-container">
            <text>剩余问题</text>
            <text style="color: #db8a28; margin-top: 5px">{{ item.problem_left_count }}</text>
          </view>
          <view class="content-container">
            <text>新增问题</text>
            <text style="color: #d93838; margin-top: 5px">{{ item.today_transferred_problem_count }}</text>
          </view>
          <view class="content-container">
            <text>整改问题</text>
            <text style="color: #0da863; margin-top: 5px">{{ item.reformed_problem_count }}</text>
          </view>
          <view class="content-container">
            <text>今日整改</text>
            <text style="color: #1fa8b8; margin-top: 5px">{{ item.today_reformed_problem_count }}</text>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import SearchTextView from "@/components/search/SearchTextView.vue";
import type { RegionData, PageListWrap } from '@/api/bean/PageListWrap'
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
import { regionData } from "@/api/common";

//页面高度
let screenHeight = ref(0);
let screenWidth = ref(0);
let scrollHeight = ref(0);

//底部容器高度
uni.getSystemInfo({
  success: (result) => {
    const height = result.windowHeight;
    const width = result.windowWidth;
    screenHeight.value = height;
    screenWidth.value = width;
    scrollHeight.value = height - 48;
  },
  fail: (error) => { },
});
const list = ref<RegionData[]>()

const jumpPage = (item: RegionData) => {
  uni.navigateTo({
    url: "/subpackages/subLedger/list?title=" + item.region_name + "&&region_id=" + item.region_id,
  });
};
const jumpSearchPage = () => {
  uni.navigateTo({
    url: "/subpackages/subLedger/search/postionSearch",
  });
};

onShow(()=>{
  loadData();
})
async function loadData() {
  list.value = (await regionData()) as RegionData[];
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000);
}
onPullDownRefresh(() => {
  loadData();
});

</script>

<style lang="less">
.serach-view-box {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
}

.item-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 2px;

  .item-title-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    border-radius: 10px 10px 0px 0px;
    background: #daf1e7;
    box-sizing: border-box;
    width: 100%;
    padding-top: 14px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 14px;
  }

  .item-content-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    background-color: #fff;
    padding-top: 8px;
    padding-bottom: 7px;

    .content-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;

      text {
        font-size: 14px;
        color: #6c7176;
      }
    }
  }
}
</style>
